<template>
  <div class="page-container">
    <div ref="chart" class="container-charts"></div>
  </div>
</template>

<script>
import { CropGrowthTrend } from "../request/api";
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
    this.getData();
    this.screen();
    // 监听窗口
    window.addEventListener("resize", this.screen)
  },
  destroyed() {
        window.removeEventListener("resize", this.screen)
    },
  methods: {
    init() {
      //获取节点
      let chart = this.$refs.chart;
      //初始化rchart
      let myChart = this.$echart.init(chart);
      this.info = myChart;
      //定义配置项
      let options = {
        //标题
        title: {
          text: "主要地区农作物种植增长趋势",
          top: 0,
          left: 20,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: '15%',
        },
        grid: {
                    top: '25%',
                    left: '15%',
                    right: '4%',
                    bottom: '10%',
                },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            //是否显示坐标轴轴线
            //  数据线
            show: true,
          },
          axisTick: {
            //是否显示坐标轴刻度
            show: true,
          },
        },
        
      };
      myChart.setOption(options);
    },
    async getData() {
      //调接口
      let result = await CropGrowthTrend();
      //   console.log(result)
      let legendlist = result.data.map((item) => {
        return item.city;
      });
      //   console.log(legendlist);
      let monthlist = result.data.map((item) => {
        return item.content;
      });
      // console.log(monthlist);
      
      // console.log(monthdata);
      //获取每一条的数据
      let numdata = result.data.map((item, index) => {
        return result.data[index].content;
      });
      // console.log(numdata);
      //定义数据列
      let seriesdata = numdata.map((item, index) => {
        return {
          name: legendlist[index],
          type: "line",
          stack: "Total",
          smooth:true,
          data: result.data[index].content.map((item) => {
            return item.area;
          }),
        };
      });
      this.setoption(seriesdata)
      console.log(seriesdata);
    },
    //设置配置项
    setoption(seriesdata, legendlist) {
      let options = {
        legend: {
          data: legendlist,
        },

        series: seriesdata,
      };
      this.info.setOption(options);
    },
    //自适应
    screen(){
        this.info.resize()
         // 自适应字体
         let width = this.$refs.chart.offsetWidth
            // console.log(this.$refs.one.offsetWidth);
            let num = width / 100 * 6
            // 重新配置字体大小
            let options = {
                title: {
                    textStyle: {
                        fontSize: num
                    }
                }

            }
            this.info.setOption(options)
    }

  },
};
</script>

<style lang="" scoped>
</style>
